import { mainColor } from "../utils";

interface Props {
  text: string;
  keyword?: string;
}

export const TextHighlight = ({ text, keyword }: Props) => {
  if (!keyword) {
    return <div>{text}</div>;
  }
  const arr = text.split(keyword);
  return (
    <div>
      {arr.map((unit, index) => (
        <span key={index}>
          {unit}
          {index < arr.length - 1 && (
            <span style={{ color: mainColor }}>{keyword}</span>
          )}
        </span>
      ))}
    </div>
  );
};
